<template>
  <div class="car-add"  v-loading="loading" >
		<el-form :inline="false" :model="store.params" :rules="rules" label-width="120px" class="clearfix" ref="ruleForm" id="carOrderForm" @submit.native.prevent="submit">
			<div class="car-info-panel clearfix" style="padding-top:0px;">
        <div class="car-info-title">销售信息</div>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" style="height: 62.20px;">
          <el-form-item label="销售类型"  prop="orderSaleType" required>
            <el-select v-model="store.params.orderSaleType" placeholder="请选择销售类型" style="width:99%;" filterable>
              <el-option v-for="item in orderSaleTypeOptions" :key="item.value" :value="item.value" :label="item.name" ></el-option>
            </el-select>
            <input type="hidden" name="orderSaleType" v-model="store.params.orderSaleType">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="成交日期"  prop="orderDealDate" required>
            <el-date-picker
              v-model="store.params.orderDealDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
            <input type="hidden" name="orderDealDate" :value="store.params.orderDealDate | filterDateForDay">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="成交员工"  prop="orderDealUserId" required>
            <el-select v-model="store.params.orderDealUserId" placeholder="请选择成交员工" style="width:99%;" filterable>
              <el-option v-for="item in userOptions" :key="item.userId" :value="item.userId" :label="item.userName" ></el-option>
            </el-select>
            <input type="hidden" name="orderDealUserId" v-model="store.params.orderDealUserId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="成交价格：" prop="orderPrice"  required>
            <el-input placeholder="请输入成交价格：" v-model.number="store.params.orderPrice"  name="orderPrice" maxlength="7" >
                <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="定金" prop="orderDeposit" >
            <el-input placeholder="请输入定金" max="9999.99" maxlength="7" min="0.01"  v-model.number="store.params.orderDeposit"  name="orderDeposit">
                <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="备注" prop="orderRemark" >
            <el-input placeholder="请输入备注" v-model="store.params.orderRemark" maxlength="200" name="orderRemark">
            </el-input>
          </el-form-item>
        </el-col>
			</div>
      <div class="car-info-panel clearfix" style="padding-top:0px;">
        <div class="car-info-title">客户信息</div>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="联系电话" prop="orderBuyerMobile">
            <el-input placeholder="请输入联系电话" maxlength="13" v-model.number="store.params.orderBuyerMobile"  name="orderBuyerMobile">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="客户名称" >
            <el-input placeholder="请输入客户名称" v-model="store.params.orderBuyerName"  name="orderBuyerName" maxlength="36">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="客户来源"  >
            <el-select v-model="store.params.channelId" placeholder="请选择客户来源" style="width:99%;" filterable>
              <el-option v-for="item in channelOptions" :key="item.channelId" :value="item.channelId" :label="item.channelName" ></el-option>
            </el-select>
            <input type="hidden" name="channelId" v-model="store.params.channelId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="归属地"  >
            <el-select v-model="store.params.provinceId" placeholder="请选择省" style="width:45%;" clearable>
              <el-option v-for="item in provinceOptions" :key="item.provinceId" :value="item.provinceId" :label="item.provinceName" ></el-option>
            </el-select>
            <el-select v-model="store.params.cityId" placeholder="请选择市" ref="city" style="width:45%;" clearable>
              <el-option v-for="item in cityOptions" :key="item.cityId" :value="item.cityId" :label="item.cityName" ></el-option>
            </el-select>
            <input type="hidden" name="provinceId" v-model="store.params.provinceId">
            <input type="hidden" name="cityId" v-model="store.params.cityId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="证件号" prop="orderBuyerCardNo">
            <el-input placeholder="请输入证件号" v-model="store.params.orderBuyerCardNo"  name="orderBuyerCardNo" maxlength="18">
            </el-input>
          </el-form-item>
        </el-col>
			</div>
      <div class="car-info-panel clearfix" style="padding-top:0px;">
        <div class="car-info-title">保险信息</div>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="是否代办保险">
            <el-switch
              v-model="store.params.orderInsuranceState"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
            <input type="hidden" name="orderInsuranceState" v-model="store.params.orderInsuranceState">
          </el-form-item>
        </el-col>
        <div v-if="store.params.orderInsuranceState">
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="保险公司"  prop="orderInsuranceCompany" required>
            <el-select v-model="store.params.orderInsuranceCompany" placeholder="请选择保险公司" style="width:99%;" filterable>
              <el-option v-for="item in insurerOptions" :key="item.insuranceId" :value="item.insuranceId" :label="item.insuranceName" ></el-option>
            </el-select>
            <input type="hidden" name="orderInsuranceCompany" v-model="store.params.orderInsuranceCompany">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="商业险" prop="orderBusinessInsurPrice" required>
            <el-input placeholder="请输入商业险" v-model.number="store.params.orderBusinessInsurPrice"  name="orderBusinessInsurPrice" maxlength="7">
                <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="交强险" prop="orderForceInsurPrice" required>
            <el-input placeholder="请输入交强险" v-model.number="store.params.orderForceInsurPrice"  name="orderForceInsurPrice" maxlength="7">
                <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        </div>
			</div>
      <input type="hidden" name="carId" :value="$route.params.id" >
      <input type="hidden" name="userId" :value="userInfo.userId">
		</el-form>
    <div class="footer">
      <!-- <mybutton  ></mybutton> -->
      <button class="el-button sort-btn el-button--primary el-button--small" form="carOrderForm">确定</button>
      <el-button size="small" @click.native="$router.back('/car')">取消</el-button>
    </div>
  </div>

</template>

<script>
  
// import OrderAndLibraryPublic from './baseCarOrderAndLibraryEditPublic'

export default {
  // components: {
  //   OrderAndLibraryPublic
  // },
  data() {
    return {
      orderSaleTypeOptions: this.$store.state.common.orderSaleTypeOptions,      
      userOptions: [],
      channelOptions: [],
      provinceOptions: [],
      cityOptions: [],
      insurerOptions: [],
      store: {
        params: {
          marketId: this.$sess.get('userInfo').marketId,
          orderSaleType: '',
          orderDealDate: new Date(),
          orderDealUserId: '',
          orderPrice: '',
          orderDeposit: '',
          orderRemark: '',
          orderBuyerMobile: '',
          orderBuyerName: '',
          orderBuyerCardNo: '',
          channelId: '',
          orderInsuranceState: '',
          provinceId: '',
        }
      },
      rules: {
        orderSaleType: [{required: true, message: '销售类型不能为空'}],
        orderDealDate: [{type: 'date',required: true, message: '成交日期不能为空'}],
        orderDealUserId: [{required: true, message: '成交员工不能为空'}],
        orderPrice: [
          {type: 'number', required: true, message: '成交价格不能为空'},
          {type: 'number', min: 0.01, message: '成交价格最小为0.01'},
          {type: 'number', max: 9999.99, message: '成交价格最大位9999.99'}
        ],
        // orderDeposit: [
        //   {type: 'number', min: 0.01, message: '定金最小为0.01'},
        //   {type: 'number', max: 9999.99, message: '定金最大位9999.99'}
        // ],
        orderRemark: [{maxlength: 200, message: '备注最大长度位200'}],
        
        orderBuyerCardNo: [
          {maxlength: 18, message: '请输入正确证件号'}
        ],
        orderInsuranceCompany: [{required: true, message: '请选择保险公司'}],
        orderBusinessInsurPrice: [
          {type: 'number', required: true, message: '商业险不能为空'},
          {type: 'number', min: 0.01, message: '商业险最小为0.01'},
          {type: 'number', max: 9999.99, message: '商业险最大位9999.99'}
        ],
        orderForceInsurPrice: [
          {type: 'number', required: true, message: '交强险不能为空'},
          {type: 'number', min: 0.01, message: '交强险最小为0.01'},
          {type: 'number', max: 9999.99, message: '交强险最大位9999.99'}
        ]
      },
      loading: false,
    }
  },
  computed: {
    userInfo: function () { return this.$sess.get('userInfo')}
  },
  created () {
    // 获取员工列表
    this.getUserList()
    // 获取客户来源
    this.getChannelList()
    // 获取省信息
    this.getProvince()
    // 获取保险公司信息
    this.getInsurerList()
  },
  activated () {
    this.$set(this.store, 'params', Object.create({marketId: this.$sess.get('userInfo').marketId, orderDealDate: new Date(), orderPrice: ''}))
  },
  methods: {
    // 提交
    submit (event) {
      this.$refs['ruleForm'].validate(val => {
        if (val) {
          let fd = new FormData(event.target)
          for(let i of fd) console.log(i)
          window.axios.post(this.$api.insertCarOrder, fd).then(res => {
            if (res && res.data.code == 1) {
              this.$message({
                message: '预定成功',
                type: 'success'
              })
              this.$router.back('/car')
            } else {
              this.$message({
                message: '预定失败:' + res && res.data && res.data.msg,
                type: 'error'
              })
            }
          })
        }
      })
      
    },
    // 获取员工列表
    getUserList () {
      window.axios.get(this.$api.getUserList, {
        params: {
          marketId: this.userInfo.marketId,
          shopId: this.userInfo.shopId,
          userState: 1
        }
      }).then(res => {
        if (res && res.data.code == 1) 
          this.userOptions = res.data.result
      })
    },
    // 获取客户来源
    getChannelList () {
      window.axios.get(this.$api.channelList, {
        params: {
          marketId: this.userInfo.marketId,
          shopId: this.userInfo.shopId
        }
      }).then(res => {
        if (res && res.data.code == 1) 
          this.channelOptions = res.data.result
      })
    },
    // 获取省信息
    getProvince () {
      window.axios.get(this.$api.province).then(res => {
        if (res && res.data.code == 1) 
          this.provinceOptions = res.data.result
        ;this.$watch('store.params.provinceId', function () {          
          this.getCity(this.store.params.provinceId)
        })
      })
    },
    // 获取市信息
    getCity(provinceId) {
      window.axios.get(this.$api.city, {params: {provinceId: provinceId}}).then(res => {
        if (res && res.data.code == 1) {
          this.cityOptions = res.data.result
          setTimeout(() => {
            this.$set(this.store.params, 'cityId', this.cityOptions[0].cityId)
          }, 50)
        }
      })
    },
    // 获取保险公司
    getInsurerList () {
      window.axios.get(this.$api.getInsurerList).then(res => this.insurerOptions = res.data.result)
    }

  }
}


</script>

<style scoped>
  .el-col.el-col-24.el-col-sm-24.el-col-md-12.el-col-lg-8.el-col-xl-6{ height: 62.40px;}
</style>
